<template>
  <div class="myEquipment">
    <el-dialog title="选择接口" :visible.sync="isDialogShowwu" :show-close="false" :close-on-click-modal="false" width="60%">
      <form @keyup.enter="search" @submit.prevent>
        <el-row class="search-box">
          <el-col :span="24">
            <label for="" class="choose">
              <span>接口名称：</span>
              <el-select v-model="form.interface_id" placeholder="请选择接口名称"  class="width200">
                <el-option v-for="item in interfacebaseList" :key="item.id" :label="item.Name" :value="item.Id"></el-option>
              </el-select>
            </label>
            <label for="" class="choose">
              <span>地区：</span>
              <el-select v-model="form.province" placeholder="请选择省份" class="width200">
                <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </label>
            <label for="" class="choose">
              <el-button icon="search" type="primary" size="small" @click="search" v-resetClick>搜索</el-button>
            </label>
          </el-col>
        </el-row>
      </form>
      <el-row class="data-list">
        <el-table :data="lists" border class="table_box" style="width:100%">
          <el-table-column width="60px" align="center">
            <template v-slot="scope">
              <el-radio v-model="interfaceObj.id" :label="scope.row.id" @change="handleRowChange(scope.row)">{{''}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="接口名称" align="center"></el-table-column>
          <el-table-column prop="province" label="地区" align="center"></el-table-column>
        </el-table>
        <paginate :callback="pageObj.callback" :page="pageObj.page"></paginate>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="interfaceEvemt(2)">取 消</el-button>
        <el-button type="primary" @click="interfaceEvemt(1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import paginate from 'components/common/paginate'
import { interfacelist, interfacebase } from 'api/txEquipment/index'
import common from 'src/util/common'
export default {
  data () {
    return {
      form: {
        interface_id: '',
        province: ''
      },
      formObj: {},
      isDialogShowwu: true,
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      lists: [],
      provinceList: common.province,
      interfacebaseList: [],
      interfaceObj: {}
    }
  },
  props: {
    interfaceData: Object
  },
  components: {
    paginate
  },
  created () {
    this.interfaceObj = JSON.parse(JSON.stringify(this.interfaceData))
    this.filterObjEvemt()
    interfacebase().then(res => {
      this.interfacebaseList = res.data || []
    })
  },
  methods: {
    handleRowChange (data) {
      if (data) {
        this.interfaceObj = JSON.parse(JSON.stringify(data))
      }
    },
    interfaceEvemt (num) {
      switch (num) {
        case 1:
          this.$emit('interfaceBouncedEvemt', {type: 1, interfaceObj: this.interfaceObj})
          break
        case 2:
          this.$emit('interfaceBouncedEvemt', {type: 2, interfaceObj: ''})
          break
      }
    },
    search () {
      this.filterObjEvemt()
    },
    getData (int) { // 获取数据
      interfacelist({
        pageIndex: int - 1,
        pageSize: 10,
        ...this.formObj
      }).then(res => {
        this.lists = res.data
        this.pageObj.page = res.page
      })
    },
    filterObjEvemt () {
      let obj = {}
      for (const key in this.form) {
        if (this.form[key] === '' || this.form[key] === null || this.form[key] === undefined) continue
        switch (key) {
          case 'type':
            break
          default:
            obj[key] = this.form[key]
            break
        }
      }
      this.formObj = JSON.parse(JSON.stringify(obj))
      this.getData(1)
      return obj
    }
  }
}
</script>
<style lang="less">
.myEquipment {
  .width200{width: 200px;}
  .width150{width: 150px;}
  .title {
    overflow: hidden;
    padding: 16px 30px;
    padding-bottom: 0;
  }
  .search-box {
    padding: 0 30px 20px 30px;
    background: #ffffff;
  }
  .data-list {
    padding: 10px 30px;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .titleright{
    float: right;
    margin-left: 20px;
  }
  .miaos{
    padding: 0 30px;
    .text{
      padding-top: 10px;
      span{
        color: #FF0000;
        font-size: 18px;
      }
    }
  }
}
</style>
